<template>
  <div class="modalInfoTemplate">
    <div class="modalContainer"
         :class="[cellNum?`cell${cellNum}`:'',modal.type==='file' || (modal.type==='input' && modal.tag === 'textarea')?'uploadModal':'']"
         v-for="(modal, index) in modelInfo">
      <div class="modalTitle" :style="{flex:fontWidth,textAlign:align}" :class="modal.titleClass">{{modal.title}}：</div>
      <div class="modalContent" v-if="readonly || modal.readonly">{{modal.value}}</div>
      <div class="modalContent" v-else :class="modal.contentClass">
        <zy-input v-if="modal.type==='input'" v-model="modal.value" :type="modal.tag" :maxlength="modal.maxlength"
                  :placeholder="modal.placeholder || `请输入${modal.title}`" :clearable="true"></zy-input>
        <el-select v-if="modal.type==='select' || modal.type==='selectMultiple'" v-model="modal.value"
                   modalable placeholder="请选择" :multiple="modal.type==='selectMultiple'" :filterable="modal.filterable"
                   :collapse-tags="!modal.showWord" :disabled="modal.disabled">
          <el-option v-for="option in modal.optionList" :key="option.value" :label="option.label"
                     :value="option.value"></el-option>
        </el-select>
        <datePicker v-if="modal.type==='date'" v-model="modal.value" :type="modal.dateType"
                    :disabled="modal.disabled"></datePicker>
        <el-cascader v-if="modal.type==='cascader' && modal.optionProps" v-model="modal.value"
                     :options="modal.optionList" ref="modalCascader"
                     @change="changeVal(modal.optionProps.checkStrictly)"
                     :props="{ checkStrictly: modal.optionProps.checkStrictly, value: modal.optionProps.value || 'value', label: modal.optionProps.label || 'label', children: modal.optionProps.children || 'children' }"
                     modalable :show-all-levels="modal.showLastLevel" :disabled="modal.disabled"></el-cascader>
        <el-radio-group v-if="modal.type==='radio'" v-model="modal.value" :disabled="modal.disabled">
          <el-radio v-for="radio in modal.optionList" :key="radio.value" :label="radio.value">{{radio.label}}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-if="modal.type=='checkbox'" v-model="modal.value" :disabled="modal.disabled">
          <el-checkbox v-for="checkbox in modal.optionList" :label="checkbox.value" :key="checkbox.value">
            {{checkbox.label}}
          </el-checkbox>
        </el-checkbox-group>
        <div class="uploadArea" v-if="modal.type==='file'">
          <el-upload
              class="upload-demo"
              drag
              action=""
              :httpRequest="uploadFile"
              :data="{index: index}"
              accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
              :show-file-list="false" :disabled="modal.disabled"
          >
            <zy-image v-model="modal.value" v-if="modal.value" @removeImage="removeImage(index)"></zy-image>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              请上传{{modal.title}}
            </div>
          </el-upload>
          <div class="uploadTip" v-if="modal.tip">{{modal.tip}}</div>
        </div>
        <!--      地图-->
        <div class="location" v-if="modal.type==='location'">
          <zy-input v-model="modal.value.address" :placeholder="'请选择'+modal.title" readonly
                    @focus="showLocation" :disabled="modal.disabled" type="textarea"></zy-input>
                    <img src="../../assets/login/dw.png" alt="" class="locationIcon" @click="showLocation(modal.disabled)" v-if="modal.isShowIcon">
          <zy-button @click="showLocation(modal.disabled)" type="primary" class="locationBtn" :disabled="modal.disabled" v-else>
            {{modal.btnName||'查看'}}
          </zy-button>
          <location :marker="modal.value.marker" :isShow="show" @close="closeModel"
                    @submit="submit($event, index)"></location>
        </div>
        <!--       评分-->
        <div class="rate-box" v-if="modal.type==='rate'">
          <el-rate v-model="modal.value" :colors="['#FFAE02']" :disabled="modal.disabled"></el-rate>
          <div class="left20">{{modal.value}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import datePicker from "../datePicker/index"
	import location from "../location/index"

	export default {
		name: "zyModalInfo",
		props: {
			modelInfo: {
				type: Array,
				default: () => []
			},
			readonly: {
				type: Boolean,
				default: () => false
			},
			cellNum: {
				type: [String, Number],
				default: () => '0'
			},
			align: {
				type: String,
				default: () => 'right'
			},
      titleWidth:{
				type: [String, Number],
				default: () => ''
			}
		},
		data() {
			return {
				fontWidth: '',
				show: false,
			};
		},
		computed: {},
		watch: {
			modelInfo: {
				handler(newVal) {
					let arr = [];
					newVal.forEach(item => {
						arr.push(item.title.length)
					})
					console.log(arr, newVal)
					let fontWidth = parseFloat((Math.max(...arr) + 2) * 14) + 'px';
					this.fontWidth = `0 0 ${this.titleWidth?this.titleWidth+'px':fontWidth}`
          console.log(this.fontWidth, ':::::123')
				},
        immediate: true,
				deep: true,
			}
		},
		components: {
			datePicker,
			location
		},
		methods: {
			changeVal(checkStrictly) {
				if (checkStrictly) {
					this.$refs.filterCascader[0].dropDownVisible = false;
				}
			},
			uploadFile(params) {
				let index = params.data.index;
				this.$axios.post(this.$api.uploadFile, {
					isFile: true,
					file: params.file,
					operator: 'goods',
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg);
						this.modelInfo[index].value = res.data.url;
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			removeImage(index) {
				this.modelInfo[index].value = '';
			},
			showLocation(disabled) {
        if(!disabled)
				this.show = true;
			},
			closeModel() {
				this.show = false;
			},
			submit(data, index) {
				this.modelInfo[index].value = data;
				this.closeModel();
			}
		},
		mounted() {

		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/common";

  .modalInfoTemplate {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .modalContainer {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      width: 100%;
      &:last-child{
        margin-bottom: 0;
      }

      &.uploadModal {
        align-items: flex-start;
      }

      .modalTitle {
        text-align: right;
        line-height: 32px;
      }

      .modalContent {
        flex: auto;
        line-height: 32px;

        /deep/ .el-radio,
        /deep/ .el-checkbox {
          margin-right: 12px;
        }

        /deep/ .el-select,/deep/ .el-cascader {
          width: 100%;
        }

        .uploadArea {
          .uploadTip {
            line-height: 1;
            font-size: 12px;
            color: @allWarringColor;
          }
        }

        .location {
          display: flex;
          position: relative;

          .locationBtn {
            flex: 0 0 66px;
            height: 40px;
            line-height: 40px;
            margin-left: @commonPaddingOutside;
          }
          .locationIcon{
            position: absolute;
            right: -36px;
            top: 6px;
            z-index: 22;
            width: 30px;
            height: 30px;
            cursor: pointer;
          }
        }

        .rate-box {
          display: flex;
          align-items: center;

          .left20 {
            margin-left: 20px;
          }
        }
      }
    }

    .cell2 {
      width: 50%
    }

    .cell3 {
      width: 33.334%
    }

    .cell4 {
      width: 25%
    }

    .cell5 {
      width: 20%
    }
  }
</style>
